    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <h1>点击按钮动态生成表格，并实行隔行变色</h1>
            <label for="">行：</label>
            <input type="text" id="row">
            <label for="">列：</label>
            <input type="text" id="col">
            <input type="button" id="btn" value="生成">
            <div id="output">
                <!-- <table>
                    <tbody>
                        <tr>
                            <td>浮动法</td>
                        </tr>
                    </tbody>
                </table> -->
            </div>
        </div>
        <!-- <script>
            // 先获取已知的元素
            var row = document.querySelector('#row');
            var col = document.querySelector('#col');
            var btn = document.querySelector('#btn');
            var output = document.querySelector('#output');
           
            // 当点击按钮时，生成动态表格
            btn.onclick = function(){
                // console.log(1);
                // 创建节点
                var table = document.createElement('table');
                var tbody = document.createElement('tbody');
                  // 把tbody放入 table中
                table.appendChild(tbody);
                // 获得行和列输入的值
                var _tr = row.value;
                var _td = col.value;
                
                // 进行 行的循环
                for(var i=0;i<_tr;i++){
                    // 进行列的循环
                    // 创建节点
                    var tr = document.createElement('tr');  
                    // 隔行变色
                    // if(i % 2 == 0){
                    //     tr.style.background = '#ccc';
                    // }
                    for(var j=0;j<_td;j++){

                        // 创建节点
                        var td = document.createElement('td');
                        td.innerHTML = '单元格'+ i + j;
                        // 把列放进行里面去
                        tr.appendChild(td);
                    }
                    tbody.appendChild(tr);
                    
                     // 把行和列放进tbody里面去
                     output.appendChild(table);

                    // 创建最后面那列td元素节点
                    var tdl = document.createElement('td');
                    tr.appendChild(tdl);
                    // 创建删除按钮元素节点
                    var btndel = document.createElement('input');
                    btndel.setAttribute('type','button');
                    btndel.setAttribute('value','删除');
                    btndel.style.width = 80+'px';
                    btndel.style.height = 20+'px';
                    //    添加进新增td元素
                    tdl.appendChild(btndel);

                    // 创建增加按钮元素节点
                    var btncop = document.createElement('input');
                    btncop.setAttribute('type','button');
                    btncop.setAttribute('value','增加');
                    btncop.style.width = 80+'px';
                    btncop.style.height = 20+'px';
                    //    添加进新增td元素
                    tdl.appendChild(btncop);

                    // // 实现删除功能
                    // btndel.onlick = function(){
                    //     this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
                    // }
                    // // 实现增加功能
                    // btncop.onclick = function(){
                    //     this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
                    // }

                    // 实现删除功能
                    btndel.onclick = function(){
                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    }
                    // 实现增加功能
                    btncop.onclick = function(){
                        tbody.appendChild(tr.cloneNode(ture));
                    }
                }
              
            }
        
        
        </script> -->
        <script>
            // 先获取已有的元素
            var row = document.querySelector('#row');
            var col = document.querySelector('#col');
            var btn = document.querySelector('#btn');
            var output = document.querySelector('#output');

             // 获取已有的元素
             var table = document.createElement('table');
             var tbody = document.createElement('tbody');
            // 放进里面去
            table.appendChild(tbody);

            // 给点击按钮添加绑定事件
            btn.onclick = function(){
                // 获取行和列输入的值
                var _row = row.value;
                var _col = col.value;
                // console.log(_row,_col);
                
                // 点击按钮，行列循环生成表格
                for(var i=0;i<_row;i++){
                    tbody.appendChild('row');
                    for(var j=0;j<_col;j++){
                        tr.appendChild('td');
                        td.value = '单元格'+i+j;
                    }
                }
            }
        </script>
    </body>
    </html>